<template>
  <li class="dock-item">
    <p class="dock-tooltip">{{ title }}</p>
    <div class="dock-icon" @click="openApp(app.appId)">
      <img :src="app.icon" />
    </div>

    <div class="dock-dot" v-if="app.open" />
  </li>
</template>

<script>
import { mapActions } from 'vuex'
export default {

  props: {
    title: {
      type: String
    },
    app: {
      type: Object
    }
  },
  data() {
    return {

    }
  },
  methods: {
    ...mapActions(['openApp'])

  }
}
</script>

<style lang="less" scoped>
@tooltip-color: rgba(75, 74, 78);
.dock-item {
  transform-origin: bottom;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
  &:hover {
    img {
      transform: scale(2);
      transition: all 0.3s;
      transform-origin: 50% 75%;
    }

    margin: 0em 2em;

    .dock-tooltip {
      opacity: 1;
    }
  }
  .dock-tooltip {
    position: absolute;
    bottom: calc(100% + 50px);
    display: block;
    opacity: 0;
    border-radius: 3px;
    padding: 5px;
    width: 100%;
    color: white;
    background-color: @tooltip-color;
    font-size: 14px;

    // border: solid 1px black;
    &::before {
      content: "";
      position: absolute;
      bottom: -4px;
      left: 0;
      right: 0;
      margin: auto;
      width: 0;
      border-radius: 3px;

      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid @tooltip-color;
    }
  }
  .dock-icon {
    will-change: width;
    width: 50px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .dock-dot {
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    margin: 0 auto;
    background-color: rgba(31, 41, 55, 1);
  }
}
</style>